<template>
  <div class="pop-filter">
    <el-popover
      ref="popover"
      placement="bottom-start"
      width="422"
      trigger="click"
      @hide="handlePopHide">
      <el-checkbox
        class="pop-checkbox-item"
        :indeterminate="isIndeterminate"
        v-model="checkAll"
        @change="handleCheckAllChange">
        全选
      </el-checkbox>
      <el-checkbox-group
        v-model="checkedArr"
        @change="handleCheckedChange">
        <el-checkbox
          class="pop-checkbox-item"
          v-for="(item, index) in options"
          :label="item[optionvalue]"
          :key="item[optionvalue]">
          {{item[optionlabel]}}
        </el-checkbox>
      </el-checkbox-group>
      <div style="margin: 15px 0;"></div>
      <div class="dialog-footer text-right" style="margin-top: 10px;">
        <el-button
          :disabled="!checkedArr.length"
          type="primary"
          size="small"
          @click="confirmMethod">
          确 定
        </el-button>
      </div>
    </el-popover>
    <div v-if="hideOutline" class="filter-toggle" v-popover:popover>
      {{label ? `${label}：`: ''}}
      <span>{{checkAll ? '全部' : '已选择'}}</span>
      <i class="el-icon-caret-bottom"></i>
    </div>
    <el-button
      v-else
      size="small"
      v-popover:popover>
      {{label ? `${label}：`: ''}}
      <span>{{checkAll ? '全部' : '已选择'}}</span>
    </el-button>
  </div>
</template>
<script>
  export default {
    props: {
      options: Array,
      label: String,
      name: String,
      optionlabel: String,
      optionvalue: String,
      selectedOptions: [Array, String],
      disabled: {
        type: Boolean,
        default: false,
      },
      hideOutline: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        checkAll: this.selectedOptions && this.selectedOptions.length
          ? this.selectedOptions.length === this.options.length
          : true,
        isIndeterminate: false,
        checkedArr: this.selectedOptions && this.selectedOptions.length
          ? this.selectedOptions
          : this.options.map((item) => item[this.optionvalue]),
      };
    },
    watch: {
      selectedOptions() {
        if (this.selectedOptions && this.selectedOptions.length) {
          this.checkedArr = this.selectedOptions;
        } else {
          this.checkedArr = this.options.map((item) => item[this.optionvalue]);
        }
      },
      checkedArr() {
        if (this.checkedArr.length === this.options.length) {
          this.checkAll = true;
        } else {
          this.checkAll = false;
        }
      },
    },
    methods: {
      handleCheckAllChange() {
        this.checkedArr = event.target.checked ? this.options.map((item, index) => item[this.optionvalue]) : [];
        this.isIndeterminate = false;
      },
      handleCheckedChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.options.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.options.length;
      },
      confirmMethod() {
        this.$emit('confirm', this.name, this.checkedArr);
        this.$refs.popover.doClose();
      },
      handlePopHide() {
        // if (!this.checkedArr.length) {
        //   this.checkedArr = this.options.map((item) => item[this.optionvalue]);
        // }
      }
    }
  }
</script>
<style scoped>
  .pop-checkbox-item {
    margin-left: 15px;
    margin-bottom: 8px;
    margin-right: 0;
  }
</style>
